<template>
  <div class="three">
    <div class="font1">项目游玩次数</div>
    <div class="font2"></div>
    <div class="lvyou" ref="charts"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let charts = ref()
onMounted(() => {
  let myChart = echarts.init(charts.value)
  let data = [
    { value: 1000, name: '摩天轮' },
    { value: 1000, name: '跷跷板' },
    { value: 2000, name: '划船' },
    { value: 2000, name: '蹦极' },
    { value: 4000, name: '电影' },
  ]
  let colors = ['#5470c6', '#fedb5f', '#73c0de', '#fc8452', '#ea7ccc']
  data.map((item, k) => {
    item['itemStyle'] = { color: colors[k] }
  })
  const computedDataGap = (dataParam) => {
    let newData = []
    let gapItem = {
      value: 20,
      name: null,
      itemStyle: {
        opacity: 0,
      },
      tooltip: {
        //隐藏这个的鼠标悬浮
        show: false,
      },
    }
    let showLen = dataParam.filter((v) => v.value && v.value > 0)
    if (showLen.length <= 1) {
      return dataParam
    }
    dataParam.map((v) => {
      newData.push(v)
      if (v.value) {
        newData.push(gapItem)
      }
    })
    return newData
  }
  let n = computedDataGap(data)
  let n2 = n.map((v) => {
    if (v.name) {
      return {
        ...v,
        itemStyle: {
          color: 'red',
          opacity: 0,
        },
      }
    } else {
      return v
    }
  })

  let option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      top: '30%',
      left: 'right',
      data: ['摩天轮', '跷跷板', '划船', '蹦极', '电影'],
      textStyle: {
        color: 'white', // 设置文字颜色为白色
        fontSize: '15px',
      },
    },
    // backgroundColor: "#fff",
    series: [
      {
        center: ['38%', '50%'], // 调整饼图的位置，使其左对齐

        name: '旅游',
        type: 'pie',
        radius: ['36%', '60%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        emphasis: {
          disabled: true,
        },
        // 占位样式
        emptyCircleStyle: {
          color: 'rgba(255,255,255,0)',
        },
        labelLine: {
          show: false,
        },
        data: n,
      },
      {
        center: ['38%', '50%'], // 调整饼图的位置，使其左对齐

        name: '旅游',
        type: 'pie',
        radius: ['62%', '61%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 1000,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disabled: true,
        },
        // 占位样式
        emptyCircleStyle: {
          color: 'rgba(255,255,255,0)',
        },
        labelLine: {
          show: false,
        },
        data: n,
      },
      {
        center: ['38%', '50%'], // 调整饼图的位置，使其左对齐

        name: '旅游',
        type: 'pie',
        radius: ['66%', '67%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          disabled: true,
        },
        // 占位样式
        emptyCircleStyle: {
          color: 'rgba(255,255,255,0)',
        },
        id: 'wai',
        data: n2,
      },
    ],
  }
  let k = 0
  myChart.setOption(option)
  myChart.on('legendselectchanged', function (lparam) {
    let selects = lparam.selected
    let newDataFilter = []
    data.filter((item) => {
      if (selects[item.name]) {
        newDataFilter.push(item)
      } else {
        let clone = {
          ...item,
          value: 0,
        }
        newDataFilter.push(clone)
      }
    })
    let nn = computedDataGap(newDataFilter)
    let nn2 = nn.map((v) => {
      if (v.name) {
        return {
          ...v,
          itemStyle: {
            color: 'red',
            opacity: 0,
          },
        }
      } else {
        return v
      }
    })
    myChart.setOption({
      series: [
        {
          data: nn,
        },
        {
          data: nn,
        },
        {
          data: nn2,
        },
      ],
    })
  })
  myChart.on('mouseover', function (lparam) {
    let k = lparam.dataIndex
    let data = myChart.getOption().series[0].data
    let nn2 = data.map((v, i) => {
      if (v.name) {
        return {
          ...v,
          itemStyle: {
            color: 'red',
            shadowBlur: 10,
            shadowColor: 'red',
            opacity: k == i ? 1 : 0,
          },
        }
      } else {
        return v
      }
    })
    myChart.setOption({
      series: [
        {
          id: 'wai',
          data: nn2,
        },
      ],
    })
  })
})
</script>
<style scoped lang="scss">
.three {
  margin-top: 10px;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: cover;

  .font1 {
    margin-top: 10px;
    color: white;
    font-size: 20px;
  }

  .font2 {
    margin-top: 10px;
    width: 68px;
    height: 7px;
    background: url(../../images/dataScreen-title.png) no-repeat;
    background-size: cover;
  }

  .lvyou {
    width: 250px;
    height: 250px;
    margin-left: 100px;
  }
}
</style>
